<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Objetive</title> 
<style type="text/css">
td {
	font-weight: bold;
}
.changed {
	color: red;
	font-weight: bold;
}
.field {
	font-weight: normal;
}
.text .field {
	width: 100%;
}
.textarea .field {
	width: 100%;
}
.select .text .field {
	width: 50px;
}
.select .field {
	width: 100px;
}
.real {
	width: 100px;
}
</style>
</head>
<body>
<form action="" id="form_crud_objective">
<h1>Add a new Objective</h1>
<table>
<tr><td>Name:</td><td><input class="text field" type="text" name="name"></td></tr>
<tr><td>Description:</td><td><textarea class="textarea field" cols="50" rows="6" name="description"></textarea></td></tr>
<tr><td>Attribute:</td><td><input class="text field" type="text" name="attribute"></td></tr>
<tr><td>Data Origin Description:</td><td><textarea class="textarea field" cols="50" rows="6" name="dataOrignDescription"></textarea></td></tr>
<tr><td>Critical Factors:</td><td><input class="text field" type="text" name="criticalFactors"></td></tr>
<tr><td>Indicators:</td><td><input class="text field" type="text" name="indicators"></td></tr>
<tr>
	<td>Frequency:</td>
	<td>
		<input type="text" class="select text field numerical" name="frequencyLength">
		<select class="select field" name="frequencyUnit">
			<option value="SECOND">seconds</option>
			<option value="MINUTE">minutes</option>
			<option value="HOUR">hours</option>
			<option value="DAY">days</option>
			<option value="MONTH">months</option>
			<option value="YEAR">years</option>
		</select>
	</td>
</tr>
<tr><td>Targets:</td><td><textarea class="textarea field" cols="50" rows="6" name="targets"></textarea></td></tr>
<tr><td>Upper Tolerance:</td><td><textarea class="textarea field" cols="50" rows="6" name="upperTolerance"></textarea></td></tr>
<tr><td>Lower Tolerance:</td><td><textarea class="textarea field" cols="50" rows="6" name="lowerTolerance"></textarea></td></tr>
<tr><td></td><td><input type="button" id="btn_save_objective" value="Add or Update Objective"></td></tr>
</table>
<input type="hidden" name="action" value="insert">
<input type="hidden" name="objId" value="">
</form>
<div id="painel_list_activity">
<h2>Registered Activities:</h2>
<ul id="list_activities">
	<li>
		<table>
			<tr><td>Name:</td><td>Teste</td></tr>
			<tr><td>Description:</td><td>None...</td></tr>
			<tr><td><a href="#">Edit</a></td><td><a href="#">Delete</a></td></tr>
		</table>
	</li>
</ul>
</div>
<div id="painel_crud_activity">
<form action="" id="form_crud_activity">
<h2>Add a new Activity:</h2>
<input type="hidden" name="objId" value="">
<table>
<tr><td>Name:</td><td><input class="text field" type="text" name="name"></td></tr>
<tr><td>Description:</td><td><textarea class="textarea field" cols="50" rows="6" name="description"></textarea></td></tr>
<tr>
	<td>Owners:</td>
	<td>
		<ul id="owners_list">
			<li id="owners_list1"><input type="text" class="text field" name="personsNames"><input type="button" value="Delete"></li>
			<li id="owners_list2"><input type="text" class="text field" name="personsNames"><input type="button" value="Delete"></li>
		</ul>
		<input type="button" id="activity_add_owner" value="Add">
	</td>
</tr>
<tr>
	<td>Expenses:</td>
	<td>
		<ul id="expenses_list">
			<li id="expenses_list1">
				<select class="select field" name="expenseType">
					<option value="SALARY">Salary</option>
					<option value="EQUIPMENT">Equipment</option>
				</select>
				<input type="text" class="select text field real" name="expenseValue">
				<input type="button" value="Delete">
			</li>
			<li id="expenses_list2">
				<select class="select field" name="expenseType">
					<option value="SALARY">Salary</option>
					<option value="EQUIPMENT">Equipment</option>
				</select>
				<input type="text" class="select text field real" name="expenseValue">
				<input type="button" value="Delete">
			</li>
		</ul>
		<input type="button" value="Add" id="expenses_add">
	</td>
</tr>
<tr><td>Indicators:</td><td><input class="text field" type="text" name="indicators"></td></tr>
<tr>
	<td>Frequency:</td>
	<td>
		<input type="text" class="select text field numerical" name="frequencyLength">
		<select class="select field" name="frequencyUnit">
			<option value="SECOND">seconds</option>
			<option value="MINUTE">minutes</option>
			<option value="HOUR">hours</option>
			<option value="DAY">days</option>
			<option value="MONTH">months</option>
			<option value="YEAR">years</option>
		</select>
	</td>
</tr>
<tr><td>Targets:</td><td><textarea class="textarea field" cols="50" rows="6" name="targets"></textarea></td></tr>
<tr><td></td><td><input type="button" id="btn_save_activity" value="Add Activity"></td></tr>
</table>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="js/deserialize.js"></script>
<script src="js/jquery.json-1.3.js"></script>
<script type="text/javascript">
function bindEvents() {
	$("#owners_list li, #expenses_list li").each(function(i) {
		var id = $(this).attr("id"); 
		$(this).children("input[type='button']").click(function(e) {
			$("#"+id).remove();
		});
	});
	$(".numerical").keyup(function(event) {
		this.value = this.value.replace(/[^0-9]/g, ""); // delete all non-numerical values
		this.value = this.value.replace(/^0+/g, ""); // delete all the 0 before of the number
	});
	$(".real").keyup(function(event) {
		this.value = this.value.replace(/[^0-9]/g, ""); // delete all non-numerical values
		this.value = this.value.replace(/^0+/g, ""); // delete all the 0 before of the number
		if (this.value.length > 2) {
			this.value = this.value.substring(0,this.value.length-2) + "," + this.value.substring(this.value.length-2);
		} else if (this.value.length > 0 && this.value.length <= 2) {
			this.value = "0," + this.value;
		}
	});
}
$(document).ready(function () {
	var owners_id = $("#owners_list > *").length;
	var expenses_id = $("#expenses_list > *").length;
	$("#activity_add_owner").click(function(e) {
		$("#owners_list").append($('<li id="owners_list'+ (++owners_id) +'"><input type="text" class="text field" name="personsNames"><input type="button" value="Delete"></li>'));
		bindEvents();
	});
	$("#expenses_add").click(function(e) {
		var html = 
			['<li id="expenses_list' + (++expenses_id) + '">',
				'<select class="select field" name="expenseType">',
					'<option value="SALARY">Salary</option>',
					'<option value="EQUIPMENT">Equipment</option>',
				'</select>',
				'<input type="text" class="select text field real" name="expenseValue">',
				'<input type="button" value="Delete">',
			'</li>'].join("");
		$("#expenses_list").append($(html));
		bindEvents();
	});
	bindEvents();
	$("#btn_save_objective").click(function(e) {
		$(".real, .numerical").keyup();
		var userData = $("#form_crud_objective").serialize();
		$("#form_crud_objective .field").attr("disabled", "true");
		$.ajax({
			type: "POST",
			url: "objective.do?" + (new Date()).getTime(),
			cache: false,
			dataType : "json",
			data: userData,
			success: function(data) {
				if (data.error != null) {
					alert("An error occurred: "+ data.error);
				} else {
					$("#form_crud_objective > input[name='action']").val("update");
					$("form input[name='objId']").val(data.objId);
					alert("Data was stored!");
				}
				$("#form_crud_objective .field")
					.attr("disabled", "")
					.removeClass("changed")
					.change(function(e) {
						$(this).addClass("changed");
					});
			}
		});
	});
	$("#btn_save_activity").click(function(e) {
		$(".real, .numerical").keyup();
		var userData = $("#form_crud_activity").serialize();
		var name = $("#form_crud_activity input[name='name']").val();
		var description = $("#form_crud_activity input[name='description']").val();
		$("#form_crud_activity .field").attr("disabled", "true");
		$.ajax({
			type: "POST",
			url: "activity.do?" + (new Date()).getTime(),
			cache: false,
			dataType : "json",
			data: userData,
			success: function(data) {
				if (data.error != null) {
					alert("An error occurred: "+ data.error);
				} else {
					//$("#form_crud_objective > input[name='action']").val("update");
					//$("#form_crud_objective > input[name='activId']").val(data.activId);

					// add to table of activities
					var new_activity = $(['<li>',
					'	<table>',
					'		<tr><td>Name:</td><td>' + name + '</td></tr>',
					'		<tr><td>Description:</td><td>' + description + '</td></tr>',
					'		<tr><td><a href="#">Edit</a></td><td><a href="#">Delete</a></td></tr>',
					'	</table>',
					'</li>'].join(""));
					$("#list_activities").append(new_activity);

					alert("Data was stored!");
					
					// Reset Activity Form
					$("#form_crud_activity .field").attr("disabled", "").val("");
					$("#owners_list > *").remove();
					$("#expenses_list > *").remove();
					for (var i = 0; i < 2; i++) {
						$("#owners_list").append($('<li id="owners_list'+ i +'"><input type="text" class="text field" name="personsNames"><input type="button" value="Delete"></li>'));
						var html = 
							['<li id="expenses_list' + i + '">',
								'<select class="select field" name="expenseType">',
									'<option value="SALARY">Salary</option>',
									'<option value="EQUIPMENT">Equipment</option>',
								'</select>',
								'<input type="text" class="select text field real" name="expenseValue">',
								'<input type="button" value="Delete">',
							'</li>'].join("");
						$("#expenses_list").append($(html));
					}
					owners_id = $("#owners_list > *").length;
					expenses_id = $("#expenses_list > *").length;
				}
			}
		});
	});
});
</script>
</body>
</html>